<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="../jquery-3.7.1.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.13/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.9.13/dist/layui.js"></script>
    <!-- 表单验证 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/localization/messages_zh.min.js"></script>
    <style>
        .box2 {
            width: 800px;
            height: 600px;
            /* border: 2px solid black; */
            margin: auto;
            margin-top: 80px;
            background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C._abuFXxfuJQAc5hHwOmO0gHaEk?r=0&rs=1&pid=ImgDetMain");
            background-repeat: no-repeat;
            background-size: cover;

        }
        h2 {
            margin: auto;
            text-align: center;
            font-size: 35px;
            margin-top: 10px;
        }
        .layui-form {
            margin-top: 200px;
            width: 250px;
        }
    </style>

<body>
    </head>

    <body>
        <h2>登录</h2>
        <div class="box2">
            <div class="layui-row">
                <form class="layui-form layui-col-md3  layui-col-md-offset4" action="./商品管理.html">
                    <div class="demo-login-container">
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-username"></i>
                                </div>
                                <input type="text" name="nickname" value="" lay-verify="required" placeholder="用户名"
                                    lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-password"></i>
                                </div>
                                <input type="password" name="password" value="" lay-verify="required"
                                    placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input"
                                    lay-affix="eye">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login"
                                lay-verify="submit">登录</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>

        <script>
            layui.use(function () {
                var form = layui.form;
                var layer = layui.layer;

                //自定义验证
                form.verify({
                    submit: function (form) {
                        var nickname = $('input[name="nickname"]').val();
                        var password = $('input[name="password"]').val();

                        if (nickname == localStorage.getItem('nickname') && password == localStorage.getItem('password')) {
                            return form.submit()
                        } else if (nickname == localStorage.getItem('nickname') && password != localStorage.getItem('password')) {
                            return "密码不正确"
                        } else if (nickname != localStorage.getItem('nickname') && password == localStorage.getItem('password')) {
                            return "用户名不正确"
                        } else if (nickname != localStorage.getItem('nickname') && password != localStorage.getItem('password')) {
                            return "用户名和密码都不正确"
                        }
                    }
                })

                // 提交事件
                form.on('submit(demo-login)'), function (data) {
                    console.log(111);
                    var field = data.field; // 获取表单字段值
                    // 显示填写结果，仅作演示用
                    layer.alert(JSON.stringify(field), {
                        title: '当前填写的字段值'
                    });
                    return true;
                };
            });
        </script>

    </body>

</html>